<!-- 添加客户信息 -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>添加客户信息</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="/lib/layui-v2.6.8/css/layui.css" media="all" />
    <link rel="stylesheet" href="/css/public.css" media="all" />
    <style>
        body {
            background-color: #ffffff;
        }

        .layui-elem-quote {
            padding: 10px;
            border-left: 5px solid #009688;
        }
    </style>
</head>

<body>
    <blockquote class="layui-elem-quote layui-text">添加客户信息</blockquote>
    <div class="layui-form layuimini-form" lay-filter="addForm">
        <!-- 表单字段 -->
        <div class="layui-form-item">
            <label class="layui-form-label required">客户类型</label>
            <div class="layui-input-block">
                <input type="radio" name="type" value="0" title="个体户" checked />
                <input type="radio" name="type" value="1" title="经销商" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">联系人</label>
            <div class="layui-input-block">
                <input type="text" id="linkman" name="linkman" lay-verify="required|linkman" lay-reqtext="联系人不能为空" placeholder="请输入" value="" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-block">
                <input type="text" id="mobile" name="mobile" lay-verify="mobile" lay-reqtext="手机号码或微信不能都为空" placeholder="请输入" value="" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">微信</label>
            <div class="layui-input-block">
                <input type="text" id="wechat" name="wechat" lay-verify="wechat" lay-reqtext="手机号码或微信不能都为空" placeholder="请输入" value="" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" id="address" name="address" placeholder="请输入" value="" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea id="remark" name="remark" placeholder="请输入" value="" class="layui-textarea"></textarea>
            </div>
        </div>
        <!-- 确认保存按钮 -->
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: right;">
                <button class="layui-btn layui-btn-primary layui-layer-close1" id="cancel">取消</button>
                <button class="layui-btn" lay-submit lay-filter="saveBtn"><i class="layui-icon"></i>确认保存</button>
            </div>
        </div>
    </div>

    <!-- 后端接口定义 -->
    <script src="/js/api-route.js"></script>
    <!-- 页面事件处理 -->
    <script src="/lib/layui-v2.6.8/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['jquery', 'layer', 'form'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                form = layui.form;

            // lay-verify设置验证规则，多个用"|"分割，默认规则有：required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity(身份证)
            // 自定义验证规则，例如：lay-verify="required|name"
            form.verify({
                // 验证联系人姓名是否重复
                linkman: function (value) {
                    var message = ''; // 验证结果
                    var params = {
                        linkman: value
                    };
                    // Ajax提交数据到后台
                    $.ajax({
                        url: $api.customer.list,
                        type: 'GET',
                        data: params, // 将对象转换为JSON字符串传递
                        dataType: 'JSON',
                        async: false, // 使用同步请求
                        contentType: 'application/json', // 指定请求方式为JSON
                        // headers: {
                        //     token: localStorage.token, // 接口请求头必须携带Token参数（登录后从本地存储中获取token）
                        // },
                        success: function (res) {
                            if (res.code == 0) {
                                // 返回的数据行大于等于1表示已经存在
                                if (res.count >= 1) {
                                    message = '该联系人已经添加过了';
                                }
                            }
                        },
                    });
                    // 验证结果返回需要写在Ajax方法外
                    if (message !== '') {
                        return message;
                    }
                },
                // 验证手机号码
                mobile: function (value) {
                    let reg = /^\S+$/g; // 验证正则
                    if (!reg.test(value) && !reg.test($('#wechat').val())) {
                        return '手机号和微信名不能都为空';
                    }
                    // 手机号码不为空才去后端验证
                    if (reg.test(value)) {
                        var message = ''; // 验证结果
                        var params = {
                            mobile: value
                        };
                        // Ajax提交数据到后台
                        $.ajax({
                            url: $api.customer.list,
                            type: 'GET',
                            data: params, // 将对象转换为JSON字符串传递
                            dataType: 'JSON',
                            async: false, // 使用同步请求
                            contentType: 'application/json', // 指定请求方式为JSON
                            // headers: {
                            // token: localStorage.token, // 接口请求头必须携带Token参数（登录后从本地存储中获取token）
                            // },
                            success: function (res) {
                                if (res.code == 0) {
                                    // 返回的数据行大于等于1表示已经存在
                                    if (res.count >= 1) {
                                        message = '该手机号码已经添加过了';
                                    }
                                }
                            },
                        });
                        // 验证结果返回需要写在Ajax方法外
                        if (message !== '') {
                            return message;
                        }
                    }

                },
                // 验证微信
                wechat: function (value) {
                    let reg = /^\S+$/g; // 验证正则
                    if (!reg.test(value) && !reg.test($('#mobile').val())) {
                        return '手机号和微信名不能都为空';
                    }
                },
            });

            // 监听提交
            form.on('submit(saveBtn)', function (data) {
                // Ajax提交数据到后台
                $.ajax({
                    url: $api.customer.add,
                    type: 'POST',
                    data: JSON.stringify(data.field), // 将对象转换为JSON字符串传递
                    dataType: 'JSON',
                    contentType: 'application/json', // 指定请求方式为JSON
                    // headers: {
                    //     token: localStorage.token, // 接口请求头必须携带Token参数（登录后从本地存储中获取token）
                    // },
                    success: function (res) {
                        if (res.code == 0) {
                            layer.msg('添加成功', {
                                icon: 6
                            });
                            parent.layui.table.reload('currentTable', {
                                page: {
                                    curr: 1
                                }
                            });
                            setTimeout(function () {
                                window.parent.layer.closeAll();
                                return false;
                            }, 500);
                        } else {
                            layer.msg('添加失败', {
                                icon: 5
                            });
                            parent.layui.table.reload('currentTable', {
                                page: {
                                    curr: 1
                                }
                            });
                            setTimeout(function () {
                                window.parent.layer.closeAll();
                                return false;
                            }, 500);
                        }
                    },
                    error: function (res) {
                        layer.msg('服务器开小差了', {
                            offset: '15px',
                            icon: 2,
                            time: 1500,
                        });
                    }
                });
            });

            // 点击取消按钮
            $('#cancel').click(function () {
                // 关闭当前弹出页面
                window.parent.layer.closeAll();
                return false;
            });

        });
    </script>
</body>

</html>